<template>
	<view class="bigbox">
		<!-- 4.通过点击登录页面的【用户注册】按钮进入到注册页面。页面
		中输入项包含账号、姓名、手机号、邮箱、密码和确认密码；每个输
		入框都具有左侧图标和圆角
		 -->
		 <view class="top">
			 <text class="title">欢迎注册~</text>
		 </view>
		
		<!-- 输入框容器 -->
		<view class="list">
			<view class="icon-input">
				<image src="../../static/logo.png" mode="" class="icon"></image>
				<input type="text" value="" class="input" v-model="act" placeholder="账号" @input="onIptAct" />
			</view>
			<view class="icon-input">
				<image src="../../static/logo.png" mode="" class="icon"></image>
				<input type="text" value="" class="input" v-model="name" placeholder="姓名" maxlength="12"
					@input="onIptName" />
			</view>
			<view class="icon-input">
				<image src="../../static/logo.png" mode="" class="icon"></image>
				<input type="text" value="" class="input" v-model="pho" placeholder="手机号" />
			</view>
			<view class="icon-input">
				<image src="../../static/logo.png" mode="" class="icon"></image>
				<input type="text" value="" class="input" v-model="email" placeholder="邮箱" />
			</view>
			<view class="icon-input">
				<image src="../../static/logo.png" mode="" class="icon"></image>
				<input type="password" value="" class="input" v-model="pwd" placeholder="密码" @input="onIptPwd"
					maxlength="10" />
			</view>
			<view class="icon-input">
				<image src="../../static/logo.png" mode="" class="icon"></image>
				<input type="password" value="" class="input" v-model="confirmPwd" placeholder="确认密码" @input="onIptConfPwd"
					maxlength="10" />
			</view>
		</view>
		<button type="primary" @click="backLog()">注册</button>

	</view>
</template>
11
<script>
	function ero(txt) {
		uni.showToast({
			title: txt,
			icon: "error"
		})
	}

	function checkIsNull(title, val) {
		if (!val) {
			ero(title + "不能为空")
			return true
		}
		return false
	}

	export default {
		data() {
			return {
				act: '',
				name: '',
				pho: '',
				email: '',
				pwd: '',
				confirmPwd: ''
			}
		},
		// 5.各输入项不能为空，且满足如下校验规则：账号只能输入字母
		// 或数字；姓名只能输入字母或数字，输入不能超过12位；手机号必须
		// 合法(13/15/17/18开头的11位手机号); 邮箱必须合法（例如
		// xx@xx.xx）；密码为6-10位，且只能输入字母或数字；确认密码输入
		// 内容需要和密码一致。
		methods: {
			onSub() {
				if (checkIsNull("账号", this.act) || checkIsNull("姓名", this.name) ||
					checkIsNull("手机号", this.pho) || checkIsNull("邮箱", this.email) ||
					checkIsNull("密码", this.pwd) || checkIsNull("确认密码", this.confirmPwd)) {
					return;
				}
				if (!(/1(3|5|7){9}/).test(this.pho)) {
					return ero("非法的手机号格式")
				}

				if (!(/\w+@\w+\.\w+/).test(this.pho)) {
					return ero("非法的邮箱格式")
				}

				if (this.pwd != this.confirmPwd) {
					return ero("两次密码输入不一致")
				}
			},
			backLog(){
				uni.navigateBack({
					
				})
			},
			onIptAct(e) {
				const v = e.detail.value
				const f = v.replace(/[^a-zA-Z0-9]/g, '')
				this.act = v;
				this.$nextTick(function() {
					this.act = f;
				})
			},
			onIptName(e) {
				const v = e.detail.value
				const f = v.replace(/[^a-zA-Z0-9]/g, '')
				this.name = v;
				this.$nextTick(function() {
					this.name = f;
				})
			},
			onIptPwd(e) {
				const v = e.detail.value
				const f = v.replace(/[^a-zA-Z0-9]/g, '')
				this.pwd = v;
				this.$nextTick(function() {
					this.pwd = f;
				})
			},
			onIptConfPwd(e) {
				const v = e.detail.value
				const f = v.replace(/[^a-zA-Z0-9]/g, '')
				this.confirmPwd = v;
				this.$nextTick(function() {
					this.confirmPwd = f;
				})
			}
		}
	}
</script>

<style>
.bigbox{
	padding: 25rpx;
}
.top{
	margin-top: 100rpx;
}
.title{
	font-size: 40rpx;
}
.list{
	margin-top: 20rpx;
/* 	background-color: #fff;
	border-radius: 16rpx;
	box-shadow: 0 1rpx 12rpx rgba(0,0,0,0.1); */
	padding: 30rpx;
}
.icon-input{
	display: flex;
	justify-content: flex-start;
	margin-bottom: 30rpx;
	line-height: 110rpx;
	height: 110rpx;
	background-color: #f7f8fa;
	border-radius: 25rpx;
	align-items: center;
}

.icon{
	width: 56rpx;
	height: 56rpx;
}
button{
	margin: 20rpx;
	border-radius: 20rpx;
}
</style>
